<template>
  <view class="top-tab-components">
    <view class="tab-box">
      <view class="tab-item" v-for="item in topTabList" :key="item.code">
        <view
          class="tab-item-title"
          :class="inActiveTab == item.code ? 'active' : ''"
          @click="activeTabChange(item.code)"
          >{{ item.title }}</view
        >
        <view class="slider-style" v-if="inActiveTab == item.code"></view>
      </view>
    </view>
    <view class="right-content">
      <text
        class="iconfont icon-weibiaoti--13"
        @click="closeFn"
        v-if="rightContent == 'close'"
      ></text>
      <text
        class="iconfont icon-weibiaoti--5"
        v-if="rightContent == 'customize'"
      ></text>
      <text class="fenxiang" v-if="rightContent == 'customize'">分享</text>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "",
  props: {
    rightContent: {
      type: String,
      default: "customize", //customize  | close
    },
    topTabList: {
      type: Array,
      default: () => {
        return [
          {
            title: "商品收藏",
            code: "collect",
          },
          {
            title: "品牌订阅",
            code: "subscribe",
          },
        ];
      },
    },
    activeTab: {
      type: String,
      default: "",
    },
  },
  components: {},
  setup(props, ctx) {
    const data = reactive({
      inActiveTab: props.activeTab ? props.activeTab : props.topTabList[0].code,
    });

    const activeTabChange = (code) => {
      data.inActiveTab = code;
      ctx.emit("activeTabChange", code);
    };
    const closeFn = () => {
      ctx.emit("closeFn");
    };
    return {
      closeFn,
      activeTabChange,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.top-tab-components {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  padding: 0 20rpx;
  .tab-box {
    display: flex;
    justify-content: start;
    .tab-item {
      display: flex;
      align-items: end;
      margin: 0 10rpx;
      position: relative;
      .tab-item-title {
        font-size: 28rpx;
        color: #666;
        &.active {
          color: #000;
          font-size: 32rpx;
        }
      }
      .slider-style {
        width: 40rpx;
        height: 7rpx;
        border-radius: 4rpx;
        background: #ff0777;
        left: 50%;
        bottom: -14rpx;
        transform: translateX(-50%);
        position: absolute;
      }
    }
  }
  .right-content {
    display: flex;
    // 竖向
    flex-direction: column;
    justify-content: center;
    .icon-weibiaoti--5 {
      font-size: 36rpx;
    }
    .fenxiang {
      font-size: 18rpx;
    }
  }
}
</style>
